<template>
<div>
    <Collapse value="0" accordion>
      <Panel :name="`${i}`"  v-for="(item, i) in data" :key="i">
         <Div :gutter="2" style="display:inline-flex;align-items: center">
          <Button size="small" style="margin-right: 10px" @click="delOption(i)">-</Button>
        </Div>
        <div slot="content">
            <part-service :data="data" :index="i" :compGroup="compGroup"
                @updateEvent="$emit('change', data)" />
        </div>
      </Panel>
    </Collapse>
    <div class="ivu-mt ivu-mb">
        <Button @click="addOption" type="primary">+</Button>
    </div>
</div>
</template>

<script>
    import partService from './part-service';
    export default {
        components: { partService },
        props: {
            compGroup: {
                default: () => {
                    return {};
                }
            },
            data: {
                default: () => {
                    return [];
                }
            }
        },
        data () {
            return {}
        },
        methods: {
            addOption (i) {
                this.data.push({
                    eventParam: [], status: 'start', objectId: '', interval: 30
                })
                this.$emit('change', this.data)
                // this.syncGroup()
            },
            delOption (i) {
                this.data.splice(i, 1)
                this.$emit('change', this.data)
                // this.syncGroup()
            },
        }
    }
</script>
<style scoped lang='scss'>

</style>
